<template>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item v-for="item in routers" :key="item.path" :to="{path:item?.path}">
        {{item?.meta?.title}}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted,computed } from "vue";
import { useRouter } from "vue-router";
import { ArrowRight } from '@element-plus/icons-vue'

const router = useRouter()

const routers = computed(()=>{
    return router.currentRoute.value.matched.filter(item=>item.meta.title)
})
</script>
<style scoped lang="less">
.el-breadcrumb__item{
  margin-bottom: 15px;
}
</style>